<!doctype html>
<html>
	<head>
		<title>Contact | Key Lime</title>
		<meta charset="utf-8">
		<meta name="description" content="Key Lime Responsive HTML5/CSS3 Template from angelostudio.net">
		<meta name="author" content="ANGELOSTUDIO.NET">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Merriweather:400,400italic,700italic" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css?v=6">
		<link rel="stylesheet" href="css/icons.css">
		<link rel="stylesheet" href="css/animate.min.css">
		<link rel="shortcut icon" href="img/ico/32.png" sizes="32x32" type="image/png"/>
		<link rel="apple-touch-icon-precomposed" href="img/ico/60.png" type="image/png"/>
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico/72.png" type="image/png"/>
		<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/ico/120.png" type="image/png"/>
		<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/ico/152.png" type="image/png"/>
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
			<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>

	<body id="home">
		<div id="menu" class="menu-right">
			<ul>
				<form class="menu-search" >
					<div class="form-group header">
						<i class="icon-search searchico"></i>
						<input type="text" placeholder="Blog Search">
						<a href="#" class="close-menu"><i class="icon-close"></i></a>
					</div>
				</form>
				<li><a href="index.html"><i class="icon-lime"></i>Home</a></li>
				<li><a href="about.html"><i class="icon-user"></i>About</a></li>
				<li class="submenu">
					<a href="#"><i class="icon-books"></i>Categories<b class="caret"></b></a>
					<ul class="submenu-list">
						<li><a href="category.html">Blogroll <span class="badge golden">2</span></a></li>
						<li><a href="category.html">Quotes<span class="badge">4</span></a></li>
						<li><a href="category.html">Travel<span class="badge red">12</span></a></li>
						<li><a href="category.html">Writing<span class="badge blue">7</span></a></li>
					</ul>		
				</li>
				<li class="submenu submenu-open">
					<a href="#"><i class="icon-file"></i>Pages<b class="caret"></b></a>
					<ul class="submenu-list">
						<li><a href="post-image.html">Post Image</a></li>
						<li><a href="post-audio.html">Post Audio</a></li>
						<li><a href="post-video.html">Post Video</a></li>						
						<li><a href="post-typography.html">Typography</a></li>
						<li><a href="author.html">Author</a></li>
						<li><a href="search.html">Search</a></li>
						<li><a href="404.html">404 Error</a></li>
					</ul>		
				</li>
				<li class="submenu">
					<a href="#"><i class="icon-calendar"></i>Archives <b class="caret"></b></a>
					<ul class="submenu-list">
						<li><a href="archives.html">June<span>2014</span></a></li>
						<li><a href="archives.html">May<span>2014</span></a></li>
						<li><a href="archives.html">January<span>2014</span></a></li>
						<li><a href="archives.html">October<span>2013</span></a></li>
					</ul>	
				</li>
				<li><a href="contact.html"><i class="icon-envelope"></i>Contact</a></li>
			</ul>
		</div>
		<div id="wrap">
			<div id="main-nav" class="nav-bg">
				<div class="container">
					<div class="nav-header">
							<a class="nav-brand" href="index.html"><i class="icon-lime"></i>Key Lime</a>
							<a class="menu-link nav-icon" href="#"><i class="icon-menu2"></i></a>
							<a class="btn btn-blog outline-white pull-right" href="#" data-toggle="modal" data-target="#loginModal">Login</a>
						</div>
				</div>
			</div>
					
			<section id="hero" class="light-typo googleMap" style="width:100%; height:448px;">
				<div class="container welcome-content">
				</div>
			</section>

			<section id="breadcrumb">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<ol class="breadcrumb">
								<li><a href="index.html">Blog</a></li>
								<li class="active">Contact</li>
							</ol>
						</div>
					</div>
				</div>
			</section>

			<div class="contact container content">
				<header class="section-header">
					<h1>Contact Form</h1>
					<p>Take me to your leader! Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</p>
				</header>
						<div class="row">
							<div class="col-xs-12 col-sm-9 col-md-9 contact-info cta-message wow fadeInLeft">

								<form action="contact.html" class="myform" method="post" novalidate id="mycomment">
									<div class="row clearfix">
										<div class="col-xs-12 col-sm-6 col-md-6">
											<div class="form-group">
												<label class="control-label">Name</label>
												<div class="controls">
													<input name="contactName" placeholder="Your name" class="form-control input-lg requiredField" type="text" data-error-empty="Enter name">
												</div>
											</div>
										</div>
										<div class="col-xs-12 col-sm-6 col-md-6">
											<div class="form-group">
												<label class="control-label" for="contact-mail">Email</label>
												<div class=" controls">
													<input name="email" placeholder="Your email" class="form-control input-lg requiredField" type="email" data-error-invalid="Invalid email address" data-error-empty="Enter email">
												</div>
											</div>
										</div>	
									</div>	
									<div class="form-group">
										<label class="control-label" for="contact-message">Message</label>
										<div class="controls">
											<textarea name="comments" placeholder="Your message" class="form-control input-lg requiredField" rows="5" data-error-empty="Enter message"></textarea>
										</div>
									</div>
									<p><button name="submit" type="submit" class="btn btn-store btn-block" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Email Sent">Send Message</button></p>
									<input type="hidden" name="submitted" id="submitted3" value="true">
								</form>	
							</div>		
							<div class="col-xs-12 col-sm-3 col-md-3 contact-info cta-message wow fadeInRight">
								<h3>Office Address</h3>
								<address>
									<br><strong>Key Lime - Melissa Sing</strong><br>
									12 State Road 123<br>
									City, State 24813<br>
									(123) 456 - 7890<br>
									contact@company.com
								</address>
							</div>	
						</div>	
					</div>



			<footer>
				<div class="footer">
					<div class="container">
						<div class="row">
							<div class="col-sm-4 col-md-4 footer-widget">
								<h3>Statistics</h3>

								<span>We can't compete with Mom! Her company is big and evil! </span>

								<div class="stats">
									<div class="line">
										<span class="counter">27</span>
										<span class="caption">Articles</span>
									</div>
									<div class="line">
										<span class="counter">208</span>
										<span class="caption">Comments</span>
									</div>
									<div class="line">
										<span class="counter">2</span>
										<span class="caption">Authors</span>
									</div>                    
								</div>
							</div>

							<div class="col-sm-4 col-md-4 footer-widget">
								<h3>Recent posts</h3>
								<div class="post-recent-widget">
									<div class="row">
										<div class="col-sm-12">
											<div class="media">
												<a class="pull-left" href="post-video.html"><img class="media-object" src="img/img2.jpg" width="80" alt=""></a>
												<div class="media-body">
													<h4 class="media-heading"><a href="post-video.html">But I've never been to the moon!</a></h4>
													<p class="post-date">may 10, 2014</p>
												</div>
											</div>
											<div class="media">
												<a class="pull-left" href="post-typography.html"><img class="media-object" src="img/img1.jpg" width="80" alt=""></a>
												<div class="media-body">
													<h4 class="media-heading"><a href="post-typography.html">We don't have a brig</a></h4>
													<p class="post-date">september 27, 2014</p>
												</div>
											</div>
											<div class="media">
												<a class="pull-left" href="post-image.html"><img class="media-object" src="img/img3.jpg" width="80" alt=""></a>
												<div class="media-body">
													<h4 class="media-heading"><a href="post-image.html">Every other day it's food, food, food.</a></h4>
													<p class="post-date">april 2, 2014</p>
												</div>
											</div>
											
										</div>
									</div>
								</div>
							</div>

							<div class="col-sm-4 col-md-4 footer-widget clearfix">
								<h3>Tags</h3>
								<ul class="tags">
									<li><a href="#">OpenPGP</a></li>
									<li><a href="#">Django</a></li>
									<li><a href="#">Bitcoin</a></li>
									<li><a href="#">Security</a></li>
									<li><a href="#">GNU/Linux</a></li>
									<li><a href="#">Git</a></li>
									<li><a href="#">Homebrew</a></li>
									<li><a href="#">Debian</a></li>                            
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="copyright">
					<div class="container">
						<p class="pull-left">Designed by <a href="http://angelostudio.net">Angelo Studio.</a></p>
						<ul class="social-links pull-right">
							<li><a href="#link"><i class="icon-twitter"></i></a></li>
							<li><a href="#link"><i class="icon-facebook"></i></a></li>
							<li><a href="#link"><i class="icon-googleplus"></i></a></li>
						</ul>
					</div>
				</div>
			</footer>
		</div>		

		<div class="modal fade login" id="loginModal" aria-hidden="true">
			  <div class="modal-dialog login">
				  <div class="modal-content">
					 <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">Login with</h4>
					</div>
					<div class="modal-body">  
						<div class="box">
							<div class="form loginBox">
								<form class="myform" method="post" action="/login" accept-charset="UTF-8">
									<div class="form-group">
										<label class="control-label">Email</label>
										<div class="controls">
											<input id="email" class="form-control" type="text" placeholder="Email" name="email">
										</div>
									</div>
									<div class="form-group">
										<label class="control-label">password</label>
										<div class="controls">
											<input id="password" class="form-control" type="password" placeholder="Password" name="password">
										</div>
									</div>
									<p class="text-center"><a href="">Forgot password?</a></p>
									<input class="btn btn-block" type="button" value="Login" >
								</form>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<div class="forgot login-footer">
							<span>Looking to <a href="#">create an account</a>?</span>
						</div>
					</div>        
				  </div>
			  </div>
		  </div>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/placeholders.min.js"></script>
		<script type="text/javascript" src="js/wow.min.js"></script>
		<script type="text/javascript" src="js/custom.js"></script>
		<script type="text/javascript" src="js/ga.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
	/* google map ======================================= */
		$(document).ready(function() {
			function initializeGoogleMap() {
				var myLatlng = new google.maps.LatLng(51.47900,-0.06204);
				var myOptions = {
					center: myLatlng,  
					zoom: 16,
					mapTypeControl: false,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					panControl: false,
					zoomControl: false,
					scaleControl: false,
					streetViewControl: false,
					scrollwheel: false
			};

			var styles = [{
				stylers: [
					{ hue: "#80B959" },
					{ saturation: -20 }
				]},{
				featureType: "road",
				elementType: "geometry",
				stylers: [
					{ lightness: 100 },
					{ visibility: "simplified" }
				]
			}];

			var map = new google.maps.Map(document.getElementById("hero"), myOptions);
			map.setOptions({styles: styles});


			var marker = new google.maps.Marker({
				position: myLatlng,
				center: myLatlng
			});


			google.maps.event.addDomListener(window, "resize", function() {
				map.setCenter(myLatlng);
			});

			marker.setMap(map);
			}

			initializeGoogleMap();
		});
		</script>
	</body>
</html>